<div id="dbset" class="container" style="width:1080px;">
  <!--左侧导航-->
  <div class="col-md-3 menu" ng-include="'pages/menu.html'"></div>
  <!--内容-->
  <div class="col-md-9 col-md-offset-3" style="padding-left: 0">
    <ul class="list-group config-nav" style="margin-bottom: 70px;">
      <b class="list-group-item title">数据库配置</b>
      <li class="list-group-item form-horizontal" style="padding: 15px 15px 0;">

        <div class="form-group">
          <label class="col-md-2 control-label">数据库IP地址</label>
          <div class="col-md-10">
            <input ng-model="data.ip" type="text" class="form-control" readonly>
          </div>
        </div>
        <div class="form-group">
          <label class="col-md-2 control-label">数据库实例</label>
          <div class="col-md-10">
            <input ng-model="data.sid" type="text" class="form-control" readonly>
          </div>
        </div>
        <div class="form-group">
          <label class="col-md-2 control-label">端口号</label>
          <div class="col-md-10">
            <input ng-model="data.port" type="text" class="form-control" readonly>
          </div>
        </div>
      </li>
      <b class="list-group-item title">
        用户配置
        <a href="javascript:void(0)" style="float: right" data-toggle="modal" data-target="#exampleModal">
          新增用户
        </a>
      </b>
      <div class="list-group-item">
        <div class="row">

          <div ng-repeat="db in data.databases" class="form-group col-md-4" style="margin-top: 8px;">
            <div><b ng-bind="db.username"></b>
              <a ng-if="db.required!='required'" ng-click="delFnc(db)" href="javascript:void(0)" class="text-danger"
                 style="font-size: 12px;float: right">
                删除用户
              </a>
            </div>
            <div class="input-group" style="margin-top: 8px;">
              <span class="input-group-addon">用户名</span>
              <input ng-model="db.username" type="text" class="form-control" placeholder="用户名" readonly tabindex="-1">
            </div>
            <div class="input-group" ng-class="db.isNull?'has-error':''" style="margin-top: 8px;">
              <span class="input-group-addon">密　码</span>
              <input ng-model="db.password" ng-change="checkPWD(db)" type="{{db.canLook?'text':'password'}}"
                     class="form-control" placeholder="密码">
              <span class="input-group-btn" ng-init="db.canLook=false" ng-click="db.canLook=!db.canLook">
                <button style="border-radius: 0!important;padding: 6px;" class="btn btn-default" type="button">
                  <i class="fa" ng-class="db.canLook?'fa-eye':'fa-eye-slash'"
                     ng-style="{color:db.canLook?'#444':'#aaa'}"></i>
                </button>
              </span>
            </div>
          </div>

        </div>
      </div>

      <li class="list-group-item">
        <div class="btn-group btn-group-justified">
          <a href="javascript:void(0)" class="btn btn-success" ng-click="testFnc(data)">测试连接</a>
        </div>
        <div class="alert alert-success" role="alert" style="margin: 10px 0 0 0;display: none;">
          测试连接<b>通过</b>，可以进行<b>下一步</b>操作！
        </div>
        <div class="progress" style="margin: 10px 0 0 0;display: none;">
          <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0"
               aria-valuemax="100" style="width: 100%">
          </div>
        </div>
      </li>

    </ul>
  </div>
</div>

<!--上/下一步-->
<a ng-click="dbsetGoBack()" class="step-btn left" data-toggle="tooltip" data-placement="right" title="返回">
  <i class="iconfont icon-back"></i>
</a>
<a ng-click="submitFnc(data)" class="step-btn right" ng-class="loadingNext?'loading':''" data-toggle="tooltip"
   data-placement="left" title="下一步">
  <i class="iconfont icon-right text-primary"></i>
</a>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
            aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">新增用户</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label class="control-label">用户名:</label>
          <input type="text" class="form-control" placeholder="点击输入" ng-model="add.username">
        </div>
        <div class="form-group">
          <label class="control-label">密码:</label>
          <input type="password" class="form-control" placeholder="点击输入" ng-model="add.password">
        </div>
        <div class="form-group">
          <label class="control-label">确认密码:</label>
          <input type="password" class="form-control" placeholder="点击输入" ng-model="add.passwordC">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" ng-click="addFnc(add)">点击新增用户</button>
      </div>
    </div>
  </div>
</div>